<template>
  <div class="x-pagination">
    <button
      type="button"
      class="btn-prev number"
      :disabled="myCurrentPage >= 1"
      @click="setMyCurrentPage(-1)"
    >
      <i class="iconfont icon-arrow-left-bold"></i>
    </button>
    <ul class="x-pager">
      <li
        :class="{
          number: true,
          active: myCurrentPage === 1,
        }"
        @click="toPage(1)"
      >
        1
      </li>
      <i
        class="iconfont icon-elipsis number"
        v-show="this.startEnd.start > 2"
      ></i>
      <li
        :class="{
          number: true,
          active: myCurrentPage === startEnd.start + index,
        }"
        v-for="(number, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
        @click="toPage(startEnd.start + index)"
      >
        {{ startEnd.start + index }}
      </li>
      <i
        class="iconfont icon-elipsis number"
        v-show="this.startEnd.end < totalPages - 1"
      ></i>
      <li
        v-if="totalPages > 1"
        :class="{
          number: true,
          active: myCurrentPage === totalPages,
        }"
        @click="toPage(totalPages)"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      type="button"
      class="btn-next number"
      :disabled="myCurrentPage === totalPages"
      @click="setMyCurrentPage(1)"
    >
      <i class="iconfont icon-arrow-right-bold"></i>
    </button>
    <span class="total">共 {{ total }} 条</span>
  </div>
</template>

<script>
export default {
  name: 'XPagination',
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      myCurrentPage: this.currentPage,
    }
  },
  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    // 计算中间按钮的开始和结束
    startEnd() {
      const { currentPage, totalPages } = this

      /*
        情况1：
          1 ... 4 5 [6] 7 8 ... 30

          start = currentPage - 2  -> 4
          end = start + 4  -> 8

        情况2：
          [1] 2 3 4 5 6 ... 30
          1 [2] 3 4 5 6 ... 30
          1 2 [3] 4 5 6 ... 30

          start = currentPage - 2  -> 1
          end = start + 4  -> 5

          start和end值有问题。
          解决：start有最小值，为2

          start = currentPage - 2  -> 1 < 2 -> 2
          end = start + 4 -> 6
        
        情况3：
          1 .... 25 26 27 28 29 [30]
          1 .... 25 26 27 28 [29] 30
          1 .... 25 26 27 [28] 29 30

          start = currentPage - 2 -> 28
          end = start + 4 -> 32

          start和end值有问题。
          解决：end有最大值，为totalPages - 1

        情况4：
          1 2 [3] 4 5 6
          1 2 [3] 4 5 
          1 2 [3] 4

        情况5：
          [1]
      */

      // if (totalPages <= 1) {
      //   return {
      //     start: 1,
      //     end: 0,
      //   };
      // }

      if (totalPages <= 7) {
        return {
          start: 2,
          end: totalPages - 1 < 1 ? 1 : totalPages - 1,
        }
      }

      let start = currentPage - 2
      if (start < 2) start = 2
      // let end = currentPage + 2;
      let end = start + 4
      if (end > totalPages - 1) {
        end = totalPages - 1
        start = end - 4
      }

      return {
        start,
        end,
      }
    },
  },
  methods: {
    // 给button标签添加点击事件，点击跳转上一页或下一页
    setMyCurrentPage(num) {
      this.myCurrentPage += num
      this.$emit('current-change', this.myCurrentPage)
    },
    // 点击跳转到指定页面
    toPage(currentPage) {
      this.myCurrentPage = currentPage
      this.$emit('current-change', currentPage)
    },
  },
  watch: {
    // 当前页码在重新搜索时不会变化,重新回到第一页查看效果
    total() {
      this.myCurrentPage = 1
    },
  },
}
</script>

<style scoped>
.x-pagination {
  display: flex;
  font-weight: 700;
}

.btn-prev,
.btn-next {
  border: none;
  outline: none;
}

.btn-prev:disabled,
.btn-next:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.x-pager {
  display: flex;
}

.number {
  margin: 0 5px;
  width: 30px;
  height: 30px;
  background-color: #f4f4f5;
  color: #606266;
  border-radius: 2px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.active {
  background-color: #c81623;
  color: #fff;
}

.total {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  margin-left: 10px;
}
</style>
